<template>
    <div class="">
        <div class="title1">{{onLine}}</div>
        <div class="row">

            <div v-for="course in newCourses"
                 v-bind:key="course.name"
                 v-bind:id="course.id+idx"
                 class="col-md-4">
                <div v-on:mouseenter="enterCourse(course)"
                     v-on:mouseleave="leaveCourse(course)"
                     class="card mb-4 shadow-sm">
                    <img v-bind:src="course.image"
                         v-on:click="clickChooseCourse(course)"
                         class="img-fluid">
                    <div class="card-body">
                        <div class="album-relative overflow-hidden">
                            <h4 class="h-block float-l">{{course.name}}</h4>
                            <h6 class="h-block float-r album-h4-r-b">{{showTeacher(course.teacherId)}}</h6>
                        </div>
                        <p class="card-text">{{course.summary}}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                                <router-link v-bind:to="'/detail?id=' + course.id" tag="button" type="button" class="btn btn-sm btn-outline-secondary">Enter</router-link>
<!--                                <router-link v-bind:to="{ name: '/detail', params: { id: course.id }}" tag="button" type="button" class="btn btn-sm btn-outline-secondary">Enter</router-link>-->
                                <button type="button" class="btn btn-sm btn-outline-secondary">Favor</button>
                            </div>
                            <small class="album-blue">{{(course.time) | formatSecond}}</small>
                        </div>
                        <div class="text-muted">
                            <div class="float-l">
                                <star-icon v-bind:quantity="course.level"></star-icon>
                                <span class="album-empty-1"></span>
                                <span class="album-green">{{COURSE_LEVEL | optionKV(course.level)}}</span>
                                <span class="album-empty"></span>
                            </div>
                            <div class="float-l">
                                <figure-icon v-bind:quantity="course.enroll"></figure-icon>
                                <span class="album-green">{{course.enroll}}</span>
                            </div>
                            <span class="album-red float-r">￥{{course.price}}.00</span>&nbsp;
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <hr/>
    </div>
</template>

<script>
    import StarIcon from "./starIcon";
    import FigureIcon from "./figureIcon";
    export default {
        name: 'theCourse',
        components: {FigureIcon, StarIcon},
        props: {
            onLine: {
                default: "New"
            },
            newCourses: {
                default: []
            },
            idx: {
                default: ""
            },
        },
        data: function () {
            return {
                teachers: [],
                COURSE_LEVEL: COURSE_LEVEL,
            }
        },
        mounted: function () {
            let _this = this;
            // 因为没有权限访问/business/admin/teacher/all
            // 暂时只用默认值。
            _this.allTeacher();
        },
        methods: {

            showTeacher: function (id) {
                let _this = this;
                let teachers = _this.teachers;

                for (let i = 0; i < teachers.length; i++) {
                    if (teachers[i].id == id) {
                        // console.log("teachers[i].nickname = ", teachers[i].nickname);
                        return teachers[i].nickname;
                    }
                }
            },

            /**
             * 查询所有讲师
             */
            allTeacher: function () {
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/album/teachers/all').then((response) => {
                    let resp = response.data;
                    _this.teachers = resp.content;
                }).catch((response)=>{
                    console.log("error：", response);
                });
            },

            getDivElement: function (id) {
                let _this = this;
                if (_this.idx) {
                    id = id + _this.idx;
                }
                let element = {};

                element.div = $("#"+id +" div:first");
                element.addBorderForDiv = function () {
                    $("#" + id +" div:first").addClass("album-border");
                }
                element.removeBorderForDiv = function () {
                    $("#" + id +" div:first").removeClass("album-border");
                }

                return element;
            },

            clickChooseCourse: function (course) {
                let _this = this;
                // 直接在访问路径中传参觉得不安全，但好处理是强制刷新也不会丢失参数
                // 带查询参数，变成 /register?plan=private
                _this.$router.push("/detail?id="+course.id);//同行于下面两种写法
                // _this.$router.push({ path: 'register', query: { id: course.id }});
                // <router-link v-bind:to="'/detail?id=' + course.id"/>
                // 将参数设置到$route.params的内部，参数不会暴露，但强制刷新参数会丢失。
                // _this.$router.push({ name: '/detail', params: { id: course.id }});

            },

            enterCourse: function (course) {
                let _this = this;
                _this.getDivElement(course.id).addBorderForDiv();
            },

            leaveCourse: function (course) {
                let _this = this;
                _this.getDivElement(course.id).removeBorderForDiv();
            },

        }

    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .album-empty{
        padding: 0.4rem;
    }

    .album-empty-1{
        padding: 0.2rem;
    }

    .album-border{
        border: solid 1px cyan;
    }

    .album-border-solid{
        border: solid 3px #0088CC;
    }

    .overflow-hidden{
        overflow: hidden;
    }

    .h-block{
        display: block;
    }

    .album-h4-r-b{
        height: 1.8rem;
        position: absolute;
        right: 0;
        top: 25%;
    }

    .album-relative{
        position: relative;
    }

    .float-l{
        float: left;
    }

    .float-r{
        float: right;
    }

    .album-red{
        color: #c03e4b;
    }

    .album-green{
        color: #00BE67;
    }

    .album-blue{
        color: #3f8ad0;
    }

    .title1{
        /*rem比较适用响应式布局，1rem=16px*/
        margin-bottom: 1rem;
        color: #3F4E54;
        letter-spacing: 0;
        font-size: 1.5rem;
    }

</style>
